<template>
	<div id="IncomeAddIdentify">
		<x-header :left-options="{showBack: false}" title="添加身份信息" class="header vux-1px-b">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="manage-list">
			<ul>
				<li class="vux-1px-b">
					<span>真实姓名</span>
					<input type="text" placeholder="请输入您的姓名" :value="userCert.identity_name" />
				</li>
				<li class="vux-1px-b">
					<span>证件类型</span>
					<p>大陆身份证</p>
				</li>
				<li>
					<span>证件号码</span>
					<input type="text" placeholder="请输入您的身份证号" :value="userCert.identity_number" />
				</li>
			</ul>
		</div>
		<div class="manage-list set-pay">
			<ul>
				<li>
					<span>设置支付密码</span>
					<x-input type="number" placeholder="请输入您的支付密码" @on-change="change" v-model="pay_pwd" /></x-input>
				</li>
			</ul>
		</div>
		<button @click="userpayPwd">确认添加</button>
		<toast v-model="success" type="text" width='6.2rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { XHeader, XInput, Toast } from 'vux'
	export default {
		data() {
			return {
				userCert: {},
				pay_pwd: '',
				success: false,
				msg: ''
			}
		},
		components: {
			XHeader,
			XInput,
			Toast
		},
		created() {
			this.getUserCert();
		},
		methods: {
			change: function(e) {
				console.log(e);
				if(e != '') {
					$('button').css('background', '#a30000')
				} else {
					$('button').css('background', '#e6e6e6')
				}
			},
			getUserCert: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/identity.json'
				}).then((result) => {
					this.userCert = result.data.data
				}).catch((err) => {

				})
			},
			userpayPwd: function() {
				var params = {
					member_paypwd: this.pay_pwd
				}
				this.$http({
					method: 'POST',
					url: '/los/api/member/pay_pwd.json',
					data: params
				}).then((result) => {
					this.success = !this.success;
					this.msg = result.data.msg
					if(result.data.code == 1) {
						setTimeout(function() {
							location.href = '#/BalanceDeposit'
						}, 1000)
					}
				}).catch((err) => {

				})
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.set-pay {
		margin-top: 0.26rem;
	}
	
	.manage-list ul {
		background: #fff;
		padding: 0 0.26rem;
	}
	
	.manage-list ul li {
		width: 100%;
		overflow: hidden;
		height: 1.3rem;
		line-height: 1.3rem;
		font-size: 0.37rem;
		color: #333;
	}
	
	.manage-list ul li span {
		float: left;
		height: 1.3rem;
		line-height: 1.3rem;
		font-size: 0.4rem;
		color: #333;
		width: 2.93rem;
		/*margin-right: 1.2rem;*/
	}
	
	.manage-list ul li input {
		height: 100%;
		line-height: 100%;
	}
	
	.manage-list ul li p {
		float: left;
	}
	
	.set-pass {
		margin-top: 0.26rem;
		height: 1.3rem;
		line-height: 1.3rem;
		background: #fff;
		padding: 0 0.26rem;
		font-size: 0.4rem;
		color: #333;
	}
	
	button {
		width: 9.2rem;
		margin-left: 0.4rem;
		height: 1.3rem;
		background: #e6e6e6;
		border: none;
		color: #fff;
		font-size: 0.4rem;
		margin-top: 1.52rem;
		border-radius: 0.05rem;
	}
</style>